<!-- 下注次数统计 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showSet="false" :showExport="false" @changeSize="changeSize" @changePage="changePage"
   @search="getSearchList" @reset="onHideDetails(true)" @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <GameItem ref="GameItemRef" @query="queryGame" />
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button>
      <el-button type="warning" @click="data.isShowDetails = true,data.oldDataList = JSON.parse(JSON.stringify(data.betRangeList))">自定义次数区间</el-button>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width" show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{item.tips}}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'date'" #default="scope">
            <span>{{ setTimestampTimeDate(scope.row.start_time)+' ~ '+setTimestampTimeDate(scope.row.end_time) }}</span>
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <GameHeaderInfo :game_id="scope.row.game_id"/>
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 游戏详情 -->
  <el-dialog v-model="data.isShowDetails" width="50%" title="自定义次数区间" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="data.isShowDetails = false" top="18vh">
    <div v-loading="indexStore.moduleLoading" class="dialogMaxHeight">
      <form-item title="自定义次数区间" :pass="true" value="bet_range" :subtract="true" @addItem="addBetRange" >
        <div class="flex margin5" v-for="(item, index) in data.oldDataList" :key="index">
          开始次数：<el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150 marginR20" v-model="item.start_num"
            placeholder="请输入次数最小值" clearable controls-position="right" />
          结束次数：<el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150" v-model="item.end_num"
          placeholder="请输入次数最小值" clearable controls-position="right" />
          <div v-show="data.oldDataList.length?true:false" class="reduce-btn reduce-btn_new marginL5" @click="reduceBetRange(index)">-</div>
        </div>
      </form-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="data.isShowDetails = false">取 消</el-button>
        <el-button type="primary" v-loading="indexStore.moduleLoading" @click="getSearchList(true)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { throttle, selectToLabel } from '@/utils/index'
import { getDateDay, setTimeValue, setTimestampTimeDate } from '@/utils/time'
import { getBetCount } from '@/api/gameReport'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1,
    platform: -1,
    game_id: -1,
    date: [getDateDay(0),getDateDay(0)],
    bet_range:[] as any
  },
  list: [],
  total: 0,
  fields: [
    { label: '游戏名称', prop: 'game_id', width: '210', visible: true, tips: '游戏名称的描述说明' },
  ] as any,
  dialogVisible: false,
  isShowDetails: false,
  checkedItem: {} as any,
  betRangeList: [
    { start_num:1,end_num:50 },
    { start_num:51,end_num:100 },
    { start_num:101,end_num:200 },
    { start_num:201,end_num:500 },
    { start_num:501,end_num:1000 },
    { start_num:1001,end_num:999999 },
  ],
  oldDataList: [
    { start_num:1,end_num:50 },
    { start_num:51,end_num:100 },
    { start_num:101,end_num:200 },
    { start_num:201,end_num:500 },
    { start_num:501,end_num:1000 },
    { start_num:1001,end_num:999999 },
  ],
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}
// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = throttle(async (show?:boolean) => {
  data.isShowDetails = false
  data.query = setTimeValue(data.query)
  if(show){
    indexStore.setModuleLoading(true)
    data.betRangeList = JSON.parse(JSON.stringify(data.oldDataList))
  }
  data.query.bet_range = data.betRangeList
  indexStore.setPageLoading(true)
  let res = await getBetCount(data.query)
  // 缓存设置的查询区间值
  localStorage.setItem('betRangeList',JSON.stringify(data.betRangeList))
  data.fields = [{ label: '游戏名称', prop: 'game_id', width: '210', visible: true, tips: '游戏名称的描述说明' }]
  // 处理表格显示区间值
  JSON.parse(localStorage.getItem('betRangeList') as string).forEach((item:any)=> {
    data.fields.push({ label: '下注次数'+item.start_num+'~'+item.end_num+'的人数', prop: item.start_num+'-'+item.end_num, width: data.betRangeList.length>5?'235':'', visible: true })
  })
  // 根据表格显示对应的区间值
  res.data?.list?.forEach((item:any)=> {
    let keys=Object.keys(item.details_map)
    keys.forEach((second:any)=> {
      item[second]= item.details_map[second]
    })
  })
  data.list = res.data?.list
  data.total = res.data.total
},2000)

// 【 - 】分号的字段处理成数组
const setArrCross = (str: string) => {
  let arr: any[] = []
  if (str.split('-').length > 1) {
    //是否有-分割
    arr = str.split('-')
  }
  return arr
}

// 自定义下注区间
const addBetRange = () => {
 data.oldDataList.push({ start_num: 1, end_num:100 })
}
const reduceBetRange = (index:number) => {
  if (!index && data.oldDataList.length == 1) {
    return ElMessage.error('最少保留一个押注额度！')
  }
  data.oldDataList.splice(index, 1)
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      agent_id: -1,
      operated_id: -1,
      platform: -1,
      game_id: -1,
      date: [getDateDay(0),getDateDay(0)],
      bet_range:[]
    }
    OperatorRef.value.onHideDetails()
    getSearchList()
  }
}
</script>
<style scoped lang="scss"></style>